<style lang="scss">
.tablelist-tabs {
	border-bottom: 1px solid #2d8cf0;
	margin-bottom: 10px;
    width: 100%;
	.ivu-btn {
		min-width: 100px;
		height: 36px;
		border-radius: 0 !important;
	}
}
.adaptive-tabs {
	border-bottom: 1px solid #2d8cf0;
	margin-bottom: 10px;
	.ivu-btn {
		min-width: auto;
		height: 36px;
		border-radius: 0 !important;
	}
}
</style>
<template>
	<ButtonGroup class="clearfix" :class="Adaptive.show ? 'adaptive-tabs': 'tablelist-tabs'" compact>
		<Button
			v-for="(item,index) in data"
			:key="index"
			:type="handleActive(item)"
			@click="handleSearch(item)"
		>{{handleCompatibleLabel(item)}}
        <span
            v-if="showSpan && item.spanKey && spanNumData[item.spanKey] > 0"
            class="number"
        >{{spanNumData[item.spanKey]}}</span>
        </Button>

	</ButtonGroup>
</template>

<script>
export default {
	props: ['data', 'defaultKey', 'formData','Adaptive','showSpan','spanNumData'],
	data() {
		return {

		}
	},
	methods: {
		//兼容老代码name属性
		handleCompatibleLabel(data) {
			return data.langKey ? $t(data.langKey, { defaultValue: data.name || data.label }) : (data.name || data.label)
		},
		// 兼容老代码val
		handleValAndValue(item) {
			return item.value === undefined ? item.val : item.value
		},
		handleActive(item) {
			const value = this.formData.search[item.key || this.defaultKey];
			const itemVal = this.handleValAndValue(item);
			return (value === itemVal || (!value && value !== 0 && !itemVal && itemVal !== 0)) ? 'primary' : 'default';
		},
		handleSearch(data) {
			const searchData = {},defaultKey = this.defaultKey;
			const attach = data.attach;
			this.data.forEach(item => {
				const attach = item.attach;
				searchData[item.key || defaultKey] = null;
				if (attach && typeof attach === 'object') {
					Object.keys(attach).forEach((key) => {
						searchData[key] = null;
					})
				}
			});
			searchData[data.key || defaultKey] = this.handleValAndValue(data);
			if (attach && typeof attach === 'object') {
				searchData = { ...searchData, ...attach };
			}
            this.$emit('on-tabs-change', searchData);
			this.$emit('on-search', searchData);
		},
	},
}
</script>
